<template>
  <el-dialog
    title="新增用户"
    :visible.sync="$store.state.role.isShow"
    width="500"
    :before-close="handleClose">
    <div>
      <el-form ref="ruleForm" :model="form"  label-width="80px">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="tel">
          <el-input v-model="form.tel"></el-input>
        </el-form-item>
        <el-form-item label="类别" prop="type">
          <el-select v-model="form.type" placeholder="请选择类别">
            <el-option label="管理员" :value="1"></el-option>
            <el-option label="普通用户" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button @click="close">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    data() {
      return {
        dialogVisible: false,
        form: {
          name: null,
          tel: null,
          type: null
        }
      };
    },
    watch: {
      '$store.state.role.isShow' (val) {
        if (val && this.$store.state.role.userInfo) {
          const  { userInfo } = this.$store.state.role
          this.form.name = userInfo.m_name
          this.form.tel = userInfo.u_tel
          this.form.type = userInfo.m_role
        }
      }
    },
    methods: {
      handleClose() {
        this.close()
      },
      close () {
        this.$refs.ruleForm.resetFields()
        this.$store.commit('updateRole', { isShow: false })
      },
      onSubmit () {
        this.$store.dispatch('roleUpdate', this.form)
      }
    }
  };
</script>

<style>
</style>